<template>
	<view>

		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10">
				<u-avatar :src="img" size="140"></u-avatar>
			</view>
			<view v-show="logins" class="u-flex-1" @click="userInfo">
				<view class="u-font-18 u-p-b-20">{{user.userInfo.nickName}}</view>
				<!-- 				<view class="u-font-14 u-tips-color">微信号:dgd</view> -->
			</view>
			<view v-show="!logins" class="u-flex-1">
				<tui-button width="252rpx" height="64rpx" :size="26" bold type="green" plain="false" @click="login()">登录</tui-button>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<view class="content">
			<view class="order">
				<view class="order_item" @click="order(0)">
					<tui-icon name="calendar" size="24" color="#fa436a"></tui-icon>
					<view class="text">全部订单</view>
				</view>
				<view class="order_item" @click="order(1)">
					<tui-icon name="wallet" size="24" color="#fa436a"></tui-icon>
					<view class="text">待付款</view>
				</view>

				<view class="order_item" @click="order(3)">
					<tui-icon name="transport" size="26" color="#fa436a"></tui-icon>
					<view class="text">待收货</view>
				</view class="text">

				<view class="order_item" @click="afterSale()">
					<tui-icon name="unreceive" size="27" color="#fa436a"></tui-icon>
					<view class="text">退款/售后</view>
				</view class="text">
				
			</view>

			<view class="content-list u-m-t-20">
				<u-cell-group>
					<u-cell-item icon="coupon" :icon-style ="{color:'#9789f7'}" @click="to(4)" title="我的优惠劵"></u-cell-item>
					<u-cell-item icon="star" :icon-style ="{color:'#9789f7'}" @click="to(0)" title="我的收藏"></u-cell-item>
					<u-cell-item icon="calendar" :icon-style ="{color:'#ee883b'}" @click="to(1)" title="浏览记录"></u-cell-item>
					<u-cell-item icon="edit-pen" :icon-style ="{color:'#ee883b'}" @click="to(2)" title="我的晒单"></u-cell-item>
					<u-cell-item icon="map"  :icon-style ="{color:'#5fcda2'}" @click="to(3)" title="地址管理"></u-cell-item>
					<button open-type='contact' session-from=''>
					<u-cell-item icon="kefu-ermai" :icon-style ="{color:'#cd4363'}"  title="客服">
						
					</u-cell-item>
					</button>
				</u-cell-group>
			</view>
			
		</view>	
		<view style="position: absolute;bottom: 120rpx;left: 0;width: 100%; display: flex;justify-content: center;">
			<u-divider  bg-color="#ededed">由萨特信研技术支持</u-divider>
		</view>
		
		<!-- <view class="u-m-t-20">	
			<u-cell-group>
				<u-cell-item icon="setting" title="设置"></u-cell-item>
			</u-cell-group>
		</view> -->
		<tabbar />

		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>

	</view>
</template>

<script>
	const img =
		""
	import tabbar from '../../components/tabbar.vue'
	import Cookies from '../../utils/Cookies.js'

	export default {
		components: {
			tabbar,

		},
		data() {
			return {
				show: true,
				logins: false,
				user: {},
				img: img,
			}
		},
		onLoad() {

		},
		onShow() {
			let _this = this;
			this.logins = Cookies.isToken();
			if (Cookies.isToken()) {
				uni.getStorage({
					key: 'user',
					success(data) {
						_this.user = data.data
						_this.img = data.data.userInfo.avatarUrl
					}
				})
			} else {
				this.img = img
			}

		},
		methods: {
			order(index) {
				if (Cookies.isToken()) {
					uni.navigateTo({
						url: '../order/order?currentTab=' + index
					})
				} else {
					Cookies.login()
				}
			},
			afterSale() {
				if (Cookies.isToken()) {
					uni.navigateTo({
						url: '../afterSale/afterSale'
					})
				} else {
					Cookies.login()
				}
			},
			userInfo() {
				if (Cookies.isToken()) {
					uni.navigateTo({
						url: '../userInfo/userInfo'
					})
				}
			},
			login() {
				uni.navigateTo({
					url: "/pages/login/login"
				});
			},
			to(index) {
				if (Cookies.isToken()) {
					if (index == 0) {
						uni.navigateTo({
							url: "/pages/collection/collection"
						});
					} else if (index == 1) {
						uni.navigateTo({
							url: "/pages/browsingHistory/browsingHistory"
						});
					} else if (index == 2) {
						uni.navigateTo({
							url: "/pages/evaluate/meEvaluate"
						});
					} else if (index == 3) {
						uni.navigateTo({
							url: "/pages/address/address"
						});
					}else if (index == 4) {
						uni.navigateTo({
							url: "/pages/coupon/myCoupon"
						});
					}

				} else {
					this.login()
				}

			}
		}
	}
</script>
<style>
	page {
		background-color: #ededed;
	}
	
</style>
<style lang="scss" scoped>
	button::after {
	  border: none;
	}
	button{
		background: none;
		    padding: 0;
	}
	.content{
		padding: 0 20rpx;
	}
	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.u-flex {
		padding-top: 15px;
	}

	.order {
		width: 100%;
		height: 150upx;
		display: flex;
		justify-content: space-between;
		padding: 10rpx 40rpx;
		background-color: #fff;
		margin: 10px 0;
		border-radius: 15rpx;
	}

	.order .order_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.order .order_item .text{
		font-size: 25rpx;
	}
	.order .order_item .img {
		width: 60upx;
		height: 70upx;
		margin-bottom: 10upx;
	}
	.content-list{
		border-radius: 15rpx;
	}
</style>
